<template>
  <div class="publicize-order-mamage">
    <div class="header">
      <div class="header-l">
        状态：
        <div @click="changeTag(0)" :class="['tag', tagActive === 0 ? 'active' : '']">待确认</div>
        <div @click="changeTag(1)" :class="['tag', tagActive === 1 ? 'active' : '']">已确认</div>
      </div>
      <el-input @keydown.enter="search" v-model="searchVal" size="large" placeholder="请输入名称" style="width: 360px;">
        <template #suffix>
          <el-icon style="cursor: pointer;" @click="search">
            <Search />
          </el-icon>
        </template>
      </el-input>
    </div>
    <div class="table">
      <el-table v-loading="listLoading" :data="tableData" show-overflow-tooltip height="100%">
        <el-table-column prop="uniqueId" type="index" label="序号" width="60" />
        <el-table-column prop="courseName" label="课程名称">
          <template #default="{ row }">
            <div class="link-button" @click="toDetails(row)">{{ row.courseName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="appointTime" label="预约日期" width="110" />
        <el-table-column prop="location" label="地点" width="100" />
        <el-table-column prop="listenerCount" label="听众人数" width="80" />
        <el-table-column prop="linkMan" label="联系人" width="80" />
        <el-table-column prop="linkManTel" label="联系人电话" width="120" />
        <!-- <el-table-column prop="date" label="申请单位" width="90" /> -->
        <el-table-column prop="createTime" label="提交时间" width="110" />
        <el-table-column prop="appointDescribe" label="预约说明" width="130" />
        <el-table-column prop="date" label="状态" width="90">
          <template #default="{ row }">
            <div v-if="row.status == 0" class="status-tag confirm">待确认</div>
            <div v-if="row.status == 1" class="status-tag complete">已确认</div>
            <div v-if="row.status == 2" class="status-tag use">已拒绝</div>
          </template>
        </el-table-column>
        <el-table-column prop="opera" label="操作" width="130">
          <template #default="{ row }">
            <div v-if="row.status === 0" @click="openConfirm(row)" class="link-button">确认</div>
            <div v-if="row.status === 1" @click="checkQRCode(row)" class="link-button">查看验证码</div>
            <!-- <el-popover placement="bottom" :width="200" popper-style="height: 200px" trigger="click">
              <el-image style="width: 100%;height: 100%;" :src="`${systemStore.frontHost}/TpwpStatic${row.qRcodePath}`"
                fit="cover">
                <template #error>
                  <div class="flex-center" style="width: 100%;height: 100%">
                    <el-icon style="font-size: 30px;">
                      <Picture />
                    </el-icon>
                  </div>
                </template>
              </el-image>
              <template #reference>
                <div v-if="row.status === 1" class="link-button">查看验证码</div>
              </template>
            </el-popover> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination :total="pager.total" v-model:current-page="pager.pageIndex" :page-size="pager.pageSize"
        @current-change="getList" prev-text="上一页" next-text="下一页" layout="prev, pager, next" background />
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="订单确认" width="30%">
    <el-radio-group v-model="confirmStatus" style="margin-bottom: 20px;">
      <el-radio border :label="1">通过</el-radio>
      <el-radio border :label="2">拒绝</el-radio>
    </el-radio-group>
    <el-input type="textarea" placeholder="请输入" v-model="appointDescribe"></el-input>
    <template #footer>
      <el-button type="primary" @click="dialogVisible = false" style="color: #8B8B8B;" text bg>取 消</el-button>
      <el-button type="primary" @click="confirm">确 认</el-button>
    </template>
  </el-dialog>
  <el-image-viewer @close="closeImgViewer" :url-list="qrcodeUrl" v-if="showImageViewer" />
</template>
<script>
export default { name: 'publicize-order-mamage' }
</script>
<script setup>
import { ref } from 'vue';
// Picture
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { http } from '@/utils/http/index.js'
import usePager from '@/hooks/usePager.js'
import { format } from '@/plugins/moment.js'
import { ElMessage } from 'element-plus'
import { useSystemStore } from '@/stores/modules/system.js'
import { useAuthStore } from '@/stores/modules/auth';
const authStore = useAuthStore()

const router = useRouter()
const systemStore = useSystemStore()

const searchVal = ref('')
const tableData = ref([])

// 分页钩子
const { pager, listLoading, proxyFun } = usePager(15, '/Preach/GetPreachOrderList')

const params = ref({
  uid: authStore.userInfo.expertId,
  dfi: {
    logic: 0,
    filters: [
      { field: 'ExpertId', operator: 8, value: authStore.userInfo.expertId },
      { field: 'auditStatus', operator: 8, value: '1' },
    ],
  }
})
const getList = () => {
  proxyFun(params.value).then(res => {
    res.result.dataLst.forEach(item => {
      item.createTime = format(item.createTime)
      item.appointTime = format(item.appointTime)
    })
    tableData.value = res.result.dataLst
  })
}

const getParams = () => {
  const temp = {
    uid: authStore.userInfo.expertId,
    dfi: {
      logic: 0,
      filters: [
        { field: 'ExpertId', operator: 8, value: authStore.userInfo.expertId },
        { field: 'courseName', operator: 0, value: searchVal.value },
        { field: 'auditStatus', operator: 8, value: '1' },
      ]
    }
  }
  if (tagActive.value !== '') temp.dfi.filters.push({ field: 'status', operator: 8, value: tagActive.value })
  return temp
}
// 初始化列表
getList()
// 检索
const search = () => {
  pager.pageIndex = 1
  params.value = getParams()
  getList()
}

const tagActive = ref('')
const changeTag = (type) => {
  tagActive.value === type ? tagActive.value = '' : (tagActive.value = type)

  pager.pageIndex = 1
  params.value = getParams()
  getList()
}

/**查看二维码 */
const showImageViewer = ref(false)
const qrcodeUrl = ref([''])
const checkQRCode = (row) => {
  qrcodeUrl.value[0] = `${systemStore.frontHost}/TpwpStatic${row.qRcodePath}`
  showImageViewer.value = true
}
const closeImgViewer = () => {
  showImageViewer.value = false;
  qrcodeUrl.value[0] = ''
}

const toDetails = (item) => {
  router.push('/personal-center/publicize-order-manage/publicize-evaluate?id=' + item.id)
}

/**确认订单 */
const dialogVisible = ref(false)
const confirmStatus = ref('')
const appointDescribe = ref('')
const currentConfirm = ref('')
const openConfirm = (row) => {
  currentConfirm.value = ''
  confirmStatus.value = ''
  appointDescribe.value = ''
  dialogVisible.value = true
  currentConfirm.value = row
}

const confirm = () => {
  if (!confirmStatus.value) return ElMessage.warning('请选择订单确认状态')
  if (confirmStatus.value == 2 && !appointDescribe.value) return ElMessage.warning('拒绝时请填写操作理由')
  http.$POST('/Preach/ConfirmPreachOrder', { orderId: currentConfirm.value.id, status: confirmStatus.value, appointDescribe: appointDescribe.value }).then(res => {
    if (res.isError) return ElMessage.warning(res.message)
    ElMessage.success(res.message)
    getList()
    dialogVisible.value = false
  })
}
</script>
<style lang='scss' scoped>
.publicize-order-mamage {
  font-family: PingFang SC-Regular, PingFang SC;
  width: 100%;
  height: 100%;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .header {
    display: flex;
    align-items: center;
    padding-bottom: 27px;
    justify-content: space-between;

    .header-l {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 15px;
      color: #525252;
      gap: 10px;

      .tag {
        user-select: none;
        color: #666666;
        padding: 8px 16px;
        background-color: #F4F4F4;
        cursor: pointer;
        transition: all .2s;

        &.active {
          color: #4A8FE0;
          background-color: #EAF3F9;
        }
      }
    }
  }

  .table {
    width: 100%;
    flex: 1;
    height: 0;

    :deep(.el-table) {
      .el-table__header {
        thead {
          th {
            background-color: #F6F6F6;
            color: #666666;
            font-weight: 600;
            font-size: 14px;
            height: 55px;
          }
        }
      }
    }
  }

  .link-button {
    color: #508CDE;
    cursor: pointer;
  }

  .status-tag {
    width: 64px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    &.complete {
      color: #2CC86D;
      background-color: #EAF9EF;
    }

    &.confirm {
      color: #3D88DE;
      background-color: #EAF3F9;
    }

    &.closed {
      color: #919191;
      background-color: #F4F4F4;
    }

    &.use {
      color: #F2A52A;
      background-color: #F9F3EA;
    }
  }

  .pagination {
    padding-top: 30px;

    :deep(.el-pagination) {
      justify-content: center;
    }
  }
}
</style>